<template>
    <div class="ecommerce-home">
      <!-- 顶部导航栏 -->
      <header class="app-header">
        <div class="container">
          <div class="header-top">
            <div class="logo" @click="goHome">
              <i class="icon-shopping-bag"></i>
              <span>优购商城</span>
            </div>
            <div class="search-bar">
              <input type="text" placeholder="搜索商品" v-model="searchKeyword">
              <button class="search-btn" @click="searchProducts">
                <i class="icon-search"></i>
              </button>
            </div>
            <div class="header-actions">
              <div class="action-item" @click="viewCart">
                <i class="icon-cart"></i>
                <span class="badge" v-if="cartCount > 0">{{ cartCount }}</span>
                <span>购物车</span>
              </div>
              <div class="action-item" @click="viewOrders">
                <i class="icon-order"></i>
                <span>我的订单</span>
              </div>
              <div class="action-item user-avatar" @click="toggleUserMenu">
                <img :src="user.avatar" alt="用户头像">
                <span>{{ user.name }}</span>
                <div class="user-menu" v-show="showUserMenu">
                  <div class="menu-item">个人中心</div>
                  <div class="menu-item">我的收藏</div>
                  <div class="menu-item">优惠券</div>
                  <div class="menu-item logout" @click="logout">退出登录</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="category-nav">
          <div class="container">
            <div class="all-categories" @mouseenter="showCategoryMenu = true" @mouseleave="showCategoryMenu = false">
              <i class="icon-menu"></i>
              <span>全部分类</span>
              <transition name="slide-fade">
                <div class="category-menu" v-show="showCategoryMenu">
                  <div 
                    v-for="category in categories" 
                    :key="category.id"
                    class="category-item"
                    @mouseenter="currentCategory = category.id"
                  >
                    <i :class="category.icon"></i>
                    <span>{{ category.name }}</span>
                    <i class="icon-arrow-right"></i>
                  </div>
                </div>
              </transition>
            </div>
            
            <div class="sub-categories" v-show="currentCategory">
              <div 
                v-for="sub in getSubcategories" 
                :key="sub.id" 
                class="sub-category"
                @click="selectSubcategory(sub.id)"
              >
                {{ sub.name }}
              </div>
            </div>
            
            <div class="nav-links">
              <a 
                v-for="(nav, index) in navLinks" 
                :key="index"
                :class="{ active: currentNav === index }"
                @click="currentNav = index"
              >
                {{ nav }}
              </a>
            </div>
          </div>
        </div>
      </header>
  
      <!-- 主要内容区 -->
      <main class="app-main">
        <div class="container">
          <!-- 轮播图区域 -->
          <section class="banner-section">
            <div class="banner">
              <div 
                v-for="(banner, index) in banners" 
                :key="banner.id" 
                class="banner-item"
                :class="{ active: currentBanner === index }"
              >
                <img :src="banner.image" alt="促销广告">
              </div>
            </div>
            <div class="banner-dots">
              <span 
                v-for="(dot, index) in banners" 
                :key="index" 
                :class="{ active: currentBanner === index }"
                @click="currentBanner = index"
              ></span>
            </div>
          </section>
          
          <!-- 促销信息 -->
          <section class="promo-section">
            <div class="promo-card" v-for="promo in promos" :key="promo.id">
              <div class="promo-icon" :style="{ backgroundColor: promo.bgColor }">
                <i :class="promo.icon"></i>
              </div>
              <div class="promo-info">
                <h3>{{ promo.title }}</h3>
                <p>{{ promo.desc }}</p>
              </div>
            </div>
          </section>
          
          <!-- 商品展示区域 -->
          <section class="product-section">
            <div class="section-header">
              <h2>热门推荐</h2>
              <div class="section-tabs">
                <span 
                  v-for="(tab, index) in productTabs" 
                  :key="index"
                  :class="{ active: currentProductTab === index }"
                  @click="currentProductTab = index"
                >
                  {{ tab }}
                </span>
              </div>
            </div>
            
            <div class="product-list">
              <div 
                v-for="product in filteredProducts" 
                :key="product.id" 
                class="product-card"
                @click="viewProduct(product.id)"
              >
                <div class="product-image">
                  <img :src="product.image" :alt="product.name">
                  <button 
                    class="quick-add" 
                    @click.stop="addToCart(product)"
                  >
                    <i class="icon-cart"></i> 加入购物车
                  </button>
                </div>
                <div class="product-info">
                  <h3 class="product-name">{{ product.name }}</h3>
                  <p class="product-desc">{{ product.description }}</p>
                  <div class="product-price">
                    <span class="current-price">¥{{ product.price.toFixed(2) }}</span>
                    <span class="original-price" v-if="product.originalPrice">
                      ¥{{ product.originalPrice.toFixed(2) }}
                    </span>
                    <span class="discount" v-if="product.discount">
                      {{ product.discount }}折
                    </span>
                  </div>
                  <div class="product-meta">
                    <span class="sales">销量: {{ product.sales }}件</span>
                    <div class="rating">
                      <i 
                        v-for="i in 5" 
                        :key="i" 
                        :class="i <= product.rating ? 'icon-star-full' : 'icon-star'"
                      ></i>
                      <span>({{ product.reviews }})</span>
                    </div>
                  </div>
                </div>
                <div class="product-tags">
                  <span 
                    v-for="tag in product.tags" 
                    :key="tag" 
                    class="tag"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
          </section>
          
          <!-- 限时抢购 -->
          <section class="flash-sale">
            <div class="section-header">
              <h2>限时抢购</h2>
              <div class="countdown">
                <span>距结束</span>
                <div class="time-box">{{ countdown.hours }}</div>
                <span>:</span>
                <div class="time-box">{{ countdown.minutes }}</div>
                <span>:</span>
                <div class="time-box">{{ countdown.seconds }}</div>
              </div>
            </div>
            
            <div class="flash-products">
              <div 
                v-for="product in flashSaleProducts" 
                :key="product.id" 
                class="flash-product"
                @click="viewProduct(product.id)"
              >
                <div class="product-image">
                  <img :src="product.image" :alt="product.name">
                  <div class="sale-progress">
                    <div class="progress-bar" :style="{ width: product.salePercent + '%' }"></div>
                    <span>已抢{{ product.salePercent }}%</span>
                  </div>
                </div>
                <div class="product-info">
                  <h3 class="product-name">{{ product.name }}</h3>
                  <div class="product-price">
                    <span class="flash-price">¥{{ product.price.toFixed(2) }}</span>
                    <span class="original-price">¥{{ product.originalPrice.toFixed(2) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>
  
      <!-- 页脚 -->
      <footer class="app-footer">
        <div class="container">
          <div class="footer-links">
            <div class="link-group" v-for="group in footerLinks" :key="group.title">
              <h3>{{ group.title }}</h3>
              <a v-for="link in group.links" :key="link">{{ link }}</a>
            </div>
            
            <div class="contact-info">
              <h3>客服服务</h3>
              <div class="contact-item">
                <i class="icon-phone"></i>
                <span>400-123-4567</span>
              </div>
              <div class="contact-item">
                <i class="icon-time"></i>
                <span>周一至周日 8:00-22:00</span>
              </div>
              <button class="online-service">
                <i class="icon-service"></i>
                在线客服
              </button>
            </div>
          </div>
          
          <div class="footer-bottom">
            <div class="copyright">
              © 2023 优购商城 版权所有
            </div>
            <div class="certification">
              <span>ICP备案号：12345678号</span>
              <span>增值电信业务经营许可证：B2-20230101</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
  
  // 用户信息
  const user = ref({
    name: '购物达人',
    avatar: 'https://picsum.photos/40/40?random=1'
  })
  
  // 搜索关键词
  const searchKeyword = ref('')
  
  // 购物车商品数量
  const cartCount = ref(3)
  
  // 用户菜单显示状态
  const showUserMenu = ref(false)
  
  // 分类菜单显示状态
  const showCategoryMenu = ref(false)
  
  // 当前选中的分类
  const currentCategory = ref(null)
  
  // 导航栏当前激活项
  const currentNav = ref(0)
  const navLinks = ref(['首页', '秒杀', '优惠券', '品牌特卖', '积分商城'])
  
  // 轮播图当前索引
  const currentBanner = ref(0)
  
  // 商品标签当前激活项
  const currentProductTab = ref(0)
  const productTabs = ref(['推荐', '手机', '电脑', '家电', '美妆', '服装'])
  
  // 倒计时
  const countdown = ref({
    hours: '02',
    minutes: '18',
    seconds: '45'
  })
  
  // 分类数据
  const categories = ref([
    { id: 1, name: '手机数码', icon: 'icon-phone' },
    { id: 2, name: '电脑办公', icon: 'icon-computer' },
    { id: 3, name: '家用电器', icon: 'icon-appliance' },
    { id: 4, name: '美妆护肤', icon: 'icon-beauty' },
    { id: 5, name: '服装鞋包', icon: 'icon-clothes' },
    { id: 6, name: '食品生鲜', icon: 'icon-food' },
    { id: 7, name: '家居家装', icon: 'icon-home' },
    { id: 8, name: '母婴玩具', icon: 'icon-baby' },
    { id: 9, name: '运动户外', icon: 'icon-sports' },
    { id: 10, name: '图书文娱', icon: 'icon-book' }
  ])
  
  // 子分类数据
  const subcategories = ref([
    { id: 11, parentId: 1, name: '手机' },
    { id: 12, parentId: 1, name: '耳机' },
    { id: 13, parentId: 1, name: '充电器' },
    { id: 14, parentId: 1, name: '智能手表' },
    { id: 21, parentId: 2, name: '笔记本电脑' },
    { id: 22, parentId: 2, name: '台式机' },
    { id: 23, parentId: 2, name: '平板电脑' },
    { id: 24, parentId: 2, name: '打印机' }
  ])
  
  // 轮播图数据
  const banners = ref([
    { id: 1, image: 'https://picsum.photos/1200/400?random=10' },
    { id: 2, image: 'https://picsum.photos/1200/400?random=11' },
    { id: 3, image: 'https://picsum.photos/1200/400?random=12' }
  ])
  
  // 促销信息
  const promos = ref([
    { id: 1, icon: 'icon-coupon', title: '新人礼券', desc: '最高减200元', bgColor: '#ffecf1' },
    { id: 2, icon: 'icon-delivery', title: '极速配送', desc: '最快30分钟送达', bgColor: '#e6f4ff' },
    { id: 3, icon: 'icon-gift', title: '积分兑换', desc: '好礼0元兑', bgColor: '#fff7e6' },
    { id: 4, icon: 'icon-service', title: '售后无忧', desc: '7天无理由退换', bgColor: '#f6ffed' }
  ])
  
  // 商品数据
  const products = ref([
    { id: 1, name: 'Apple iPhone 14 Pro Max', description: 'A16仿生芯片，超视网膜XDR显示屏', price: 8999.00, originalPrice: 9999.00, discount: 9, image: 'https://picsum.photos/300/300?random=20', sales: 5420, rating: 4.5, reviews: 1245, tags: ['爆款', '新品'], category: 1 },
    { id: 2, name: '华为MateBook X Pro', description: '13代酷睿处理器，3.1K全面屏', price: 8999.00, image: 'https://picsum.photos/300/300?random=21', sales: 3210, rating: 4.8, reviews: 876, tags: ['轻薄', '高性能'], category: 2 },
    { id: 3, name: '戴森吹风机 HD15', description: '负离子护发，智能温控技术', price: 3190.00, originalPrice: 3490.00, discount: 9.1, image: 'https://picsum.photos/300/300?random=22', sales: 1987, rating: 4.7, reviews: 542, tags: ['热卖'], category: 3 },
    { id: 4, name: 'SK-II神仙水护肤套装', description: '经典护肤精华露230ml', price: 1540.00, image: 'https://picsum.photos/300/300?random=23', sales: 4210, rating: 4.9, reviews: 2103, tags: ['进口', '礼盒'], category: 4 },
    { id: 5, name: 'Nike Air Jordan 1', description: '经典高帮篮球鞋', price: 1299.00, originalPrice: 1499.00, discount: 8.7, image: 'https://picsum.photos/300/300?random=24', sales: 2987, rating: 4.6, reviews: 987, tags: ['限量', '潮鞋'], category: 5 },
    { id: 6, name: '索尼 PlayStation 5', description: '光驱版游戏主机', price: 3899.00, image: 'https://picsum.photos/300/300?random=25', sales: 5123, rating: 4.8, reviews: 1567, tags: ['新品', '游戏'], category: 10 },
    { id: 7, name: '佳能 EOS R6 Mark II', description: '全画幅专微相机', price: 15999.00, originalPrice: 16999.00, discount: 9.4, image: 'https://picsum.photos/300/300?random=26', sales: 876, rating: 4.9, reviews: 321, tags: ['专业', '套装'], category: 1 },
    { id: 8, name: '戴森空气净化器', description: '除甲醛除菌，智能净化', price: 5990.00, image: 'https://picsum.photos/300/300?random=27', sales: 1567, rating: 4.7, reviews: 543, tags: ['智能', '热卖'], category: 3 }
  ])
  
  // 限时抢购商品
  const flashSaleProducts = ref([
    { id: 9, name: '小米13 Ultra', description: '徕卡光学镜头', price: 5999.00, originalPrice: 6499.00, image: 'https://picsum.photos/300/300?random=28', salePercent: 78 },
    { id: 10, name: 'iPad Pro 2023', description: 'M2芯片，120Hz刷新率', price: 6799.00, originalPrice: 7299.00, image: 'https://picsum.photos/300/300?random=29', salePercent: 65 },
    { id: 11, name: 'Bose QuietComfort 45', description: '主动降噪耳机', price: 1999.00, originalPrice: 2299.00, image: 'https://picsum.photos/300/300?random=30', salePercent: 42 },
    { id: 12, name: '飞利浦电动牙刷', description: '钻石系列声波震动', price: 899.00, originalPrice: 1299.00, image: 'https://picsum.photos/300/300?random=31', salePercent: 91 }
  ])
  
  // 页脚链接
  const footerLinks = ref([
    {
      title: '购物指南',
      links: ['购物流程', '会员介绍', '常见问题', '联系客服']
    },
    {
      title: '配送方式',
      links: ['上门自提', '211限时达', '配送服务查询', '海外配送']
    },
    {
      title: '支付方式',
      links: ['货到付款', '在线支付', '分期付款', '公司转账']
    },
    {
      title: '售后服务',
      links: ['售后政策', '价格保护', '退款说明', '返修/退换货']
    }
  ])
  
  // 计算属性：获取当前分类的子分类
  const getSubcategories = computed(() => {
    if (!currentCategory.value) return []
    return subcategories.value.filter(sub => sub.parentId === currentCategory.value)
  })
  
  // 计算属性：获取过滤后的商品
  const filteredProducts = computed(() => {
    if (currentProductTab.value === 0) {
      return products.value
    }
    // 简单模拟按分类筛选
    return products.value.slice(0, 6)
  })
  
  // 轮播图自动切换定时器
  let bannerTimer = null
  
  // 方法：切换用户菜单显示状态
  const toggleUserMenu = () => {
    showUserMenu.value = !showUserMenu.value
  }
  
  // 方法：选择子分类
  const selectSubcategory = (id) => {
    alert(`打开子分类: ${id}`)
    showCategoryMenu.value = false
    currentCategory.value = null
  }
  
  // 方法：添加商品到购物车
  const addToCart = (product) => {
    cartCount.value++
    alert(`已添加 "${product.name}" 到购物车`)
  }
  
  // 方法：查看商品详情
  const viewProduct = (id) => {
    alert(`查看商品详情: ${id}`)
  }
  
  // 方法：查看购物车
  const viewCart = () => {
    alert('查看购物车')
  }
  
  // 方法：查看订单
  const viewOrders = () => {
    alert('查看我的订单')
  }
  
  // 方法：搜索商品
  const searchProducts = () => {
    if (searchKeyword.value.trim()) {
      alert(`搜索: ${searchKeyword.value}`)
    }
  }
  
  // 方法：用户登出
  const logout = () => {
    alert('用户已登出')
    showUserMenu.value = false
  }
  
  // 方法：返回首页
  const goHome = () => {
    currentNav.value = 0
    currentProductTab.value = 0
    window.scrollTo(0, 0)
  }
  
  // 倒计时更新
  const updateCountdown = () => {
    // 这里简化处理，实际应计算真实时间差
    const seconds = parseInt(countdown.value.seconds) - 1
    if (seconds < 0) {
      countdown.value.seconds = 59
      const minutes = parseInt(countdown.value.minutes) - 1
      if (minutes < 0) {
        countdown.value.minutes = 59
        countdown.value.hours = parseInt(countdown.value.hours) - 1
      } else {
        countdown.value.minutes = minutes < 10 ? `0${minutes}` : `${minutes}`
      }
    } else {
      countdown.value.seconds = seconds < 10 ? `0${seconds}` : `${seconds}`
    }
  }
  
  // 组件挂载时启动定时器
  onMounted(() => {
    // 轮播图自动切换
    bannerTimer = setInterval(() => {
      currentBanner.value = (currentBanner.value + 1) % banners.value.length
    }, 5000)
    
    // 倒计时更新
    setInterval(updateCountdown, 1000)
  })
  
  // 组件卸载前清除定时器
  onBeforeUnmount(() => {
    if (bannerTimer) {
      clearInterval(bannerTimer)
    }
  })
  </script>
  
  <style scoped>
  .ecommerce-home {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f7fa;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #333;
  }
  
  /* 容器样式 */
  .container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  /* 顶部导航栏样式 */
  .app-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .header-top {
    display: flex;
    align-items: center;
    height: 80px;
  }
  
  .logo {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #ff5000;
    cursor: pointer;
  }
  
  .logo i {
    font-size: 32px;
    margin-right: 10px;
  }
  
  .search-bar {
    flex: 1;
    max-width: 600px;
    margin: 0 40px;
    display: flex;
  }
  
  .search-bar input {
    flex: 1;
    height: 44px;
    padding: 0 20px;
    border: 2px solid #ff5000;
    border-radius: 22px 0 0 22px;
    font-size: 14px;
    outline: none;
  }
  
  .search-btn {
    width: 90px;
    height: 44px;
    background: #ff5000;
    border: none;
    border-radius: 0 22px 22px 0;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .search-btn:hover {
    background: #ff6a00;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
  }
  
  .action-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 25px;
    font-size: 14px;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
  }
  
  .action-item:hover {
    color: #ff5000;
  }
  
  .action-item i {
    font-size: 22px;
    margin-right: 6px;
  }
  
  .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff5000;
    color: white;
    font-size: 12px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  
  .user-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
  }
  
  .user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 120px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 200;
  }
  
  .menu-item {
    padding: 10px 16px;
    font-size: 14px;
    transition: background 0.2s;
  }
  
  .menu-item:hover {
    background: #f5f5f5;
  }
  
  .logout {
    color: #ff5000;
    border-top: 1px solid #eee;
  }
  
  /* 分类导航样式 */
  .category-nav {
    height: 50px;
    background: linear-gradient(to right, #ff5000, #ff6a00);
    color: white;
  }
  
  .category-nav .container {
    display: flex;
    height: 100%;
  }
  
  .all-categories {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .all-categories i {
    font-size: 20px;
    margin-right: 8px;
  }
  
  .category-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 150;
  }
  
  .category-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #333;
    font-size: 14px;
    transition: all 0.2s;
  }
  
  .category-item:hover {
    background: #fff7f5;
    color: #ff5000;
  }
  
  .category-item i {
    font-size: 18px;
    margin-right: 10px;
    color: #ff6a00;
  }
  
  .category-item .icon-arrow-right {
    margin-left: auto;
    font-size: 12px;
  }
  
  .sub-categories {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 20px;
  }
  
  .sub-category {
    margin-right: 25px;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
  }
  
  .sub-category:hover {
    color: #ffdd00;
  }
  
  .nav-links {
    display: flex;
    align-items: center;
  }
  
  .nav-links a {
    padding: 0 15px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  
  .nav-links a:hover {
    opacity: 0.9;
  }
  
  .nav-links a.active {
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  
  /* 轮播图样式 */
  .banner-section {
    position: relative;
    height: 400px;
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .banner {
    height: 100%;
  }
  
  .banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  .banner-item.active {
    opacity: 1;
  }
  
  .banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  
  .banner-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .banner-dots span.active {
    background: white;
    transform: scale(1.2);
  }
  
  /* 促销信息样式 */
  .promo-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0;
  }
  
  .promo-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
  }
  
  .promo-card:hover {
    transform: translateY(-5px);
  }
  
  .promo-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  
  .promo-icon i {
    font-size: 28px;
    color: #ff5000;
  }
  
  .promo-info h3 {
    font-size: 18px;
    margin-bottom: 6px;
  }
  
  .promo-info p {
    font-size: 14px;
    color: #666;
  }
  
  /* 商品区域样式 */
  .product-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
  }
  
  .section-header h2 {
    font-size: 22px;
    font-weight: bold;
    color: #333;
  }
  
  .section-tabs {
    display: flex;
    background: #f5f7fa;
    border-radius: 20px;
    padding: 4px;
  }
  
  .section-tabs span {
    padding: 6px 20px;
    font-size: 14px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .section-tabs span:hover {
    background: #e0e6f0;
  }
  
  .section-tabs span.active {
    background: #ff5000;
    color: white;
  }
  
  .product-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .product-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    transition: all 0.3s;
    border: 1px solid #f0f0f0;
  }
  
  .product-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
  }
  
  .product-image {
    position: relative;
    height: 260px;
    overflow: hidden;
  }
  
  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  
  .product-card:hover .product-image img {
    transform: scale(1.05);
  }
  
  .quick-add {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(255, 80, 0, 0.9);
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: bottom 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .quick-add i {
    margin-right: 6px;
    font-size: 16px;
  }
  
  .product-card:hover .quick-add {
    bottom: 0;
  }
  
  .product-info {
    padding: 15px;
  }
  
  .product-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .product-desc {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .product-price {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .current-price {
    font-size: 20px;
    font-weight: bold;
    color: #ff5000;
    margin-right: 10px;
  }
  
  .original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
  }
  
  .discount {
    margin-left: auto;
    padding: 2px 8px;
    background: #fff0e6;
    color: #ff5000;
    border-radius: 4px;
    font-size: 12px;
  }
  
  .product-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
  }
  
  .rating {
    display: flex;
    align-items: center;
  }
  
  .rating i {
    font-size: 14px;
    color: #ffb400;
    margin-right: 2px;
  }
  
  .product-tags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
  }
  
  .tag {
    padding: 4px 8px;
    background: #ff5000;
    color: white;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 6px;
  }
  
  /* 限时抢购样式 */
  .flash-sale {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .flash-sale .section-header {
    border-bottom: 1px solid #ffefe6;
  }
  
  .countdown {
    display: flex;
    align-items: center;
    background: #ff5000;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
  }
  
  .countdown span {
    margin: 0 4px;
  }
  
  .time-box {
    background: #000;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
  }
  
  .flash-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
  }
  
  .flash-product {
    background: #fffaf5;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid #ffefe6;
  }
  
  .flash-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(255, 80, 0, 0.15);
  }
  
  .flash-product .product-image {
    height: 200px;
    position: relative;
  }
  
  .sale-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
  }
  
  .progress-bar {
    height: 4px;
    background: #ff5000;
    border-radius: 2px;
    margin-bottom: 4px;
  }
  
  .flash-product .product-info {
    padding: 15px;
  }
  
  .flash-product .product-name {
    font-size: 15px;
    margin-bottom: 10px;
    height: auto;
  }
  
  .flash-price {
    font-size: 18px;
    font-weight: bold;
    color: #ff5000;
  }
  
  .original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
  }
  
  /* 页脚样式 */
  .app-footer {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 40px 0 20px;
    margin-top: auto;
  }
  
  .footer-links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #3e546b;
  }
  
  .link-group h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: white;
  }
  
  .link-group a {
    display: block;
    font-size: 14px;
    color: #bdc3c7;
    margin-bottom: 12px;
    transition: color 0.3s;
  }
  
  .link-group a:hover {
    color: #ff5000;
  }
  
  .contact-info h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: white;
  }
  
  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #bdc3c7;
  }
  
  .contact-item i {
    font-size: 18px;
    margin-right: 10px;
    color: #ff5000;
  }
  
  .online-service {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #ff5000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 15px;
  }
  
  .online-service:hover {
    background: #ff6a00;
  }
  
  .online-service i {
    margin-right: 8px;
    font-size: 16px;
  }
  
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    font-size: 12px;
    color: #7f8c8d;
  }
  
  .certification span {
    margin-left: 20px;
  }
  
  /* 动画效果 */
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  
  .slide-fade-leave-active {
    transition: all 0.2s ease;
  }
  
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
  }
  
  /* 图标样式 */
  [class^="icon-"] {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-shopping-bag:before { content: "\e600"; }
  .icon-search:before { content: "\e601"; }
  .icon-cart:before { content: "\e602"; }
  .icon-order:before { content: "\e603"; }
  .icon-menu:before { content: "\e604"; }
  .icon-arrow-right:before { content: "\e605"; }
  .icon-phone:before { content: "\e606"; }
  .icon-computer:before { content: "\e607"; }
  .icon-appliance:before { content: "\e608"; }
  .icon-beauty:before { content: "\e609"; }
  .icon-clothes:before { content: "\e60a"; }
  .icon-food:before { content: "\e60b"; }
  .icon-home:before { content: "\e60c"; }
  .icon-baby:before { content: "\e60d"; }
  .icon-sports:before { content: "\e60e"; }
  .icon-book:before { content: "\e60f"; }
  .icon-coupon:before { content: "\e610"; }
  .icon-delivery:before { content: "\e611"; }
  .icon-gift:before { content: "\e612"; }
  .icon-service:before { content: "\e613"; }
  .icon-star-full:before { content: "\e614"; }
  .icon-star:before { content: "\e615"; }
  .icon-phone:before { content: "\e616"; }
  .icon-time:before { content: "\e617"; }
  </style>